<template>
  <div>
    <div class="pagination_wrap">
      <div class="pagination">
        <ul class="pagination-list">
          <li
            :class="['page-arrow', { 'page-arrow--disable': activePage <= 1 }]"
            @click="goToPrevPage"
          >
            <div class="i page-arrow__left"></div>
          </li>
          <li
            v-for="page in pageNumbers"
            :key="page"
            :class="['page-item', { 'page-item--active': page === activePage }]"
            @click="goToPage(page)"
          >
            {{ page }}
          </li>
          <li
            :class="[
              'page-arrow',
              { 'page-arrow--disable': activePage >= total },
            ]"
            @click="goToNextPage"
          >
            <div class="i page-arrow__right" style="position: relative"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  activePage: {
    type: Number,
    default: 1,
  },
});

const emit = defineEmits<{
  "update:activePage": [page: number];
  "page-change": [page: number];
}>();

// 计算页码数组
const pageNumbers = computed(() => {
  const pages = [];
  for (let i = 1; i <= props.total; i++) {
    pages.push(i);
  }
  return pages;
});

// 跳转到指定页面
const goToPage = (page: number) => {
  if (page !== props.activePage && page >= 1 && page <= props.total) {
    console.log("页数========", page);

    emit("page-change", page);
    console.log("当前页数========更新", props.activePage);
  }
};

// 上一页
const goToPrevPage = () => {
  if (props.activePage > 1) {
    goToPage(props.activePage - 1);
  }
};

// 下一页
const goToNextPage = () => {
  if (props.activePage < props.total) {
    goToPage(props.activePage + 1);
  }
};
</script>
<style scoped lang="scss">
.pagination_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.pagination {
  height: 40px;
}

.pagination-list {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .pagination-list {
    justify-content: flex-start;
  }
}

.page-arrow {
  padding-right: 12px;
}

@media (min-width: 768px) {
  .page-arrow {
    padding-right: 24px;
  }
}

.page-arrow:last-child {
  padding-right: 0;
  padding-left: 12px;
}

@media (min-width: 768px) {
  .page-arrow:last-child {
    padding-left: 24px;
  }
}

.page-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 575.98px) {
  .pagination {
    height: 32px;
  }
}

.pagination .page-arrow,
.pagination .page-item {
  cursor: pointer;
}

.pagination .page-ellipsis {
  width: 24px;
}

.pagination .page-ellipsis:after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #1a1c20;
  opacity: 0.2;
}

.pagination .page-item {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  width: 30px;
  height: 40px;
  color: #64788f;
  margin: 0 4px;
}

@media (max-width: 1023.98px) {
  .pagination .page-item {
    line-height: 1.25;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 767.98px) {
  .pagination .page-item {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 1023.98px) {
  .pagination .page-item {
    width: 20px;
    height: 32px;
  }
}

@media (max-width: 767.98px) {
  .pagination .page-item {
    width: 20px;
    height: 30px;
    margin: 0 2px;
  }
}

.pagination .page-arrow--disable .page-arrow__left,
.pagination .page-arrow--disable .page-arrow__right {
  background-color: #e4e4e6;
}

.pagination .page-arrow:hover .page-arrow__left:before,
.pagination .page-arrow:hover .page-arrow__right:before {
  transform: translate(-50%, -50%);
}

.pagination .page-arrow:hover .page-arrow__left:after,
.pagination .page-arrow:hover .page-arrow__right:after {
  transform: translate(150%, -50%);
}

.pagination .page-arrow--disable:hover .page-arrow__left:before,
.pagination .page-arrow--disable:hover .page-arrow__right:before {
  transform: translate(-260%, -50%);
}

.pagination .page-arrow--disable:hover .page-arrow__left:after,
.pagination .page-arrow--disable:hover .page-arrow__right:after {
  transform: translate(-50%, -50%);
}

.pagination .page-arrow:active .page-arrow__left:before,
.pagination .page-arrow:active .page-arrow__right:before {
  transform: translate(-260%, -50%);
}

.pagination .page-arrow:active .page-arrow__left:after,
.pagination .page-arrow:active .page-arrow__right:after {
  transform: translate(-50%, -50%);
}

.pagination .page-arrow__left,
.pagination .page-arrow__right {
  width: 18px;
  height: 18px;
  background-color: #0032a0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.pagination .page-arrow__left:after,
.pagination .page-arrow__left:before,
.pagination .page-arrow__right:after,
.pagination .page-arrow__right:before {
  content: "";
  width: 6px;
  height: 9px;
  position: absolute;
  top: 50%;
  left: 55%;
  background-image: url();
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: hsla(0, 0%, 100%, 0);
  transition: transform 0.4s ease;
}

.pagination .page-arrow__left:before,
.pagination .page-arrow__right:before {
  transform: translate(-260%, -50%);
}

.pagination .page-arrow__left:after,
.pagination .page-arrow__right:after {
  transform: translate(-50%, -50%);
}

.pagination .page-arrow__left {
  transform: scale(-1);
  margin-right: 15px;
}

@media (max-width: 1023.98px) {
  .pagination .page-arrow__left {
    margin-right: 11px;
  }
}

@media (max-width: 767.98px) {
  .pagination .page-arrow__left {
    margin-right: 5px;
  }
}

.pagination .page-arrow__right {
  margin-left: 15px;
}

@media (max-width: 1023.98px) {
  .pagination .page-arrow__right {
    margin-left: 11px;
  }
}

@media (max-width: 767.98px) {
  .pagination .page-arrow__right {
    margin-left: 5px;
  }
}

.pagination .page-item--active,
.pagination .page-item:hover {
  color: #0048e8;
}

.explore-links__title[data-v-2464c240] {
  color: #2a3b4d;
  padding-bottom: 18px;
}

@media (max-width: 767.98px) {
  .explore-links__title[data-v-2464c240] {
    padding-bottom: 8px;
  }
}

.explore-links__item[data-v-2464c240] {
  padding-top: 8px;
  display: flex;
}
</style>
